<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background: coral;
      cursor: pointer;
      /*transition: all 1s ease-in;*/
      /*position: fixed;*/
      /*left: 0px;*/
      /*right: 0px;*/
      /*bottom: 0px;*/
      /*top: 0px;*/
      /*margin: auto;*/
    }
  </style>
</head>
<body>

<div class="box"></div>

<script>
  // firt: 获取元素起始坐标的信息
  // last: 获取新的位置信息（虽然元素的位置信息确定了，但是元素还没有进行渲染）
  // Invert: 计算新的位置和开始位置的的变化量，然后使用transform设置变量量，也就是让元素回到最初的位置
  // play: 删除掉transform,元素就会回到新的位置上

  const box = document.querySelector(".box");
  box.onclick = function () {
    const boxClone = box.cloneNode();
    const firstRect = box.getBoundingClientRect();

    Object.assign(boxClone.style, {
      position: "fixed",
      left: "0px",
      right: "0px",
      bottom: "0px",
      top: "0px",
      width: "600px",
      height: "600px",
      margin: "auto"
    })
    const div = document.createElement('div');
    Object.assign(div.style, {
      position: "fixed",
      top: "0px",
      bottom: "0px",
      left: "0px",
      right: "0px",
      background: "rgba(0, 0, 0, 0.5)"
    })
    div.append(boxClone);
    document.body.append(div)
    const lastRect = boxClone.getBoundingClientRect()
    const y = lastRect.top - firstRect.top;
    const x = lastRect.left - firstRect.left;

    console.log(lastRect, firstRect)
    boxClone.style.transformOrigin = "0 0"
    // 这里最开始没有重合，这个x,y计算还是有问题，但是思想是对的
    boxClone.style.transform = `scale(0.5) translate(${-x}px, ${-y}px)`


    requestAnimationFrame(() => {
      boxClone.style.transition = "all .5s"
      boxClone.style.transform = ""
    })
  }

</script>
</body>
</html>